<template>
  <div>
    <el-form :inline="true" :model="queryParams" size="mini">
      <el-form-item :label="$t('title')">
        <el-input v-model="queryParams.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="requestData" icon="el-icon-search">{{
          $t("search")
        }}</el-button>
        <el-button
          type="primary"
          v-if="addPermission"
          @click="addParish"
          icon="el-icon-plus"
          >{{ $t("add") }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      stripe
      class="init_table"
    >
      <el-table-column
        label="名称"
        min-width="200"
        prop="title"
        show-overflow-tooltip
        align="left"
      >
      </el-table-column>
      <el-table-column prop="province" :label="$t('province')">
      </el-table-column>
      <el-table-column prop="city" :label="$t('city')"> </el-table-column>
      <el-table-column prop="district" :label="$t('district')">
      </el-table-column>
      <el-table-column prop="address" :label="$t('address')"> </el-table-column>
      <el-table-column prop="status" :label="$t('status')"> </el-table-column>

      <el-table-column align="center" :label="$t('actions')" width="300px">
        <template slot-scope="scope">
          <el-button
            v-if="updatePermission"
            size="mini"
            @click="editParish(scope.row)"
            >{{ $t("edit") }}
          </el-button>
          <el-button
            v-if="deletePermission"
            type="danger"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
            >{{ $t("delete") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<el-pagination class="mo-page"
                   @current-change="requestData"
                   :current-page.sync="pagination.currentPage"
                   :page-size="pagination.pageSize"
                   layout="total, prev, pager, next, jumper"
                   :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
import {
  getParishList,
  deleteParish,
} from "../../../api/parish";
import {
  responseDataFormat,
  tableDefaultData,
  editSuccess,
  addSuccess,
  deleteSuccess,
} from "../../../libs/tableDataHandle";
import { hasPermission } from "../../../libs/permission";
// import VueNeditorWrap from 'vue-neditor-wrap'
import { queryParams } from "../../../mixins/queryParams"

export default {
  name: "adminParishIndex",
  components: {
    // VueNeditorWrap
  },
  mixins:[queryParams],
  data: () => ({
    ...tableDefaultData(),
    cropImageParams: {
      show: false,
      params: {
        token: "123456798",
        name: "avatar",
      },
      headers: {
        smail: "*_~",
      },
      imgDataUrl: "",
    },
    fileList: [],
      fileUrl:'',

    content: "",
    rules: {
      name: [{ required: true }, { min: 1, max: 255 }],
      uri: [{ required: true }, { min: 1, max: 255 }],
      guard_name: [{ required: true }, { min: 1, max: 255 }],
      parent_id: [{ required: true, type: "number" }],
      sequence: [{ type: "number" }],
    },
  }),
      watch:{
        $route(to,from){
            if (from.name=='adminParishEdit'){
              this.requestData();
            }
        }
    },
  methods: {
    handleRemove(file, filelist) {
      console.log(file, filelist);
    },
    addParish() {
      this.$router.push({ name: "adminParishEdit" });
    },
    ready() {
      console.log("redddddddd");
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteParish(row.id).then((response) => {
        deleteSuccess(index, this);
        this.requestData();
      });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
     
    },
    editParish(row) {
      this.$router.push({name: 'adminParishEdit', params: {id: row.id}})
    },

    requestData() {
      this.loading = true;
      getParishList({ ...this.queryParams, page: this.queryPage }).then(
        (response) => {
          responseDataFormat(response, this);
        }
      );
    },

    //drop
    toggleShow() {
      this.cropImageParams.show = !this.cropImageParams.show;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {
      console.log("-------- crop success --------");
      this.cropImageParams.imgDataUrl = imgDataUrl;
    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess(retdata) {
      console.log("-------- upload success --------");
      // this.fileList.push(jsonData)
      console.log("fileList: ", retdata);
      console.log("this.filelist", this.fileList);
    },
      cropUploadUrlSuccess(retdata) {
          console.log('fileUrl',this.fileUrl)
      },
      removefile(){
        this.fileUrl = ''
      },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field) {
      console.log("-------- upload fail --------");
      console.log(status);
      console.log("field: " + field);
    },
  },
  computed: {
    updatePermission: function () {
      return hasPermission("parish.update");
    },
    addPermission: function () {
      return hasPermission("parish.store");
    },
    deletePermission: function () {
      return hasPermission("parish.destroy");
    },
  },
  created() {
    this.requestData();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
